<template>
	<view>

		<u-sticky>
			<!-- 顶部导航 -->
			<lr-navigation-bar class="navi-bar" title="车辆管理"
				backgroundImageUrl="../../static/car/navigationBar_carBg.png" placeholder="请输入车牌号/车架号"
				@searchChange="searchChange" @handleFilter="handleFilter"></lr-navigation-bar>

			<!-- 标签控件 -->
			<view class="tab-swiper">
				<u-tabs-swiper activeColor="#1573FF" ref="tabs" :list="list" :current="current" @change="tabChange"
					:is-scroll="false"></u-tabs-swiper>
			</view>

		</u-sticky>
		
		<screenData @dataChange="screenChange"></screenData>

		<mescroll-body ref="mescrollRef222" @init="mescrollInit" @down="downCallback" @up="upCallback">

			<view class="item item_margin" @click="goDetail(item)" v-for="(item, index) in listdata" :key="item.carNo">


				<view style="display: flex;align-items: center;position: relative;">
					<image :src="item.carModelImg|mmvImageUrl" mode="scaleToFill"
						style="width: 220rpx;height: 200rpx;margin: 20rpx 20rpx 0;"></image>

					<view style="display: flex;flex-direction: column;justify-content: center;">
						<text style="color: #333;font-size: 28rpx;">{{item.carNo|filterNull}}</text>
						<text
							style="font-size: 24rpx;color: #a7a7a7;margin-top: 18rpx;">{{item.brandName|filterNull}}/{{item.seriesName|filterNull}}/{{item.modelName|filterNull}}</text>
						<text
							style="font-size: 24rpx;color: #a7a7a7;margin-top: 18rpx;">里程数{{item.sumOdograph|filterNull}}km</text>

						<text class="state" :style="{'background-color':
							1==item.businessType?'#1573ff':
							2==item.businessType?'#e93131':
							3==item.businessType?'#ffc000':
							4==item.businessType?'#2fc38d':'#cacaca'
						 }">{{item.businessTypeStr}}</text>

						<view class="tags" v-if="item.reminders">
							<view class="tag" v-for="(tItem, tIndex) in item.reminders" :key="tIndex">
								{{tItem}}
							</view>
						</view>

					</view>

				</view>

			</view>
		</mescroll-body>
		
		<!-- 底部导航 -->
		<HomeTabbar :tab="1"></HomeTabbar>
	</view>
</template>

<script>
	import lrNavigationBar from "../../components/global/lr-navigation-bar.vue"
	import screenData from "@/components/screen-data.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import HomeTabbar from '@/components/tabbar.vue';

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [{
						name: '全部',
						num: 0
						// count: 1
					},
					{
						name: '整备中',
						// count: 12345
						num: 0
					},
					{
						name: '备发车',
						// count: 123
						num: 0
					},
					{
						name: '预定中',
						// count: 5678
						num: 0
					},
					{
						name: '用车中',
						// count: 99999
						num: 0
					}
				],
				current: 0,
				searchVal: '',
				pageNo: 1,
				listdata: [],
				goScreen:false,
				
				sData:{}
			}
		},
		components: {
			lrNavigationBar,
			screenData,
			HomeTabbar,
		},
		onLoad() {
			
			this.getCountData();

			this.getListData();
			
			uni.$on('refreshcar', res=>{
				this.pageNo = 1;
				this.getCountData();
				this.getListData();
			})
		},
		onShow() {
			this.goScreen = false
		},
		onHide() {
			if(!this.goScreen){
				console.log('--------执行清除---------');
				uni.$emit('clearAll', true);
			}
		},

		methods: {
			
			//输入框发生改变监听事件
			searchChange(value) {
				console.log('搜素框内容----' + value);
				this.searchVal = value;

				this.pageNo = 1;
        this.getCountData();
				this.getListData();
			},
			
			screenChange(res){
				
				console.log('=页面最终收到筛选变动了=res====', res);
				
				this.sData = res;
				
				this.pageNo = 1;
				this.getCountData();
				this.getListData();
			},

			//筛选
			handleFilter() {
				console.log('点击了筛选');
				this.goScreen = true
				uni.navigateTo({
					url:'/pagesB/screen/screen?type=carScreening'
				})
			},
			//切换标签
			tabChange(index) {
				console.log('标签切换了', index);
				this.current = index;

				this.pageNo = 1;
				this.getListData();
			},

			getCountData() {
				this.$u.api.getCarPageListCount({
					...this.sData,
					searchVal: this.searchVal,
				}).then(res => {
					this.list[0].num = res.allCount;
					this.list[1].num = res.servicingCount;
					this.list[2].num = res.preparationCount;
					this.list[3].num = res.bookCount;
					this.list[4].num = res.takeCount;
				})
			},

			getListData() {

				let type = -1;
				if (this.current == 0) {
					type = -1;
				} else {
					type = this.current;
				}

				this.$u.api.carBasicList({
					...this.sData,
					searchVal: this.searchVal,
					businessType: type,
					pageNo: this.pageNo
				}).then(res => {
					console.log('停止刷新');
					if (this.pageNo == 1) {

            this.listdata = [];
          }
          this.listdata = this.listdata.concat(res);
          this.mescroll.endSuccess(res.length);
        }).catch(() => {
					this.mescroll.endErr();
				})
			},

			upCallback(page) {
				console.log("触发了上拉加载" + page);

				this.pageNo = page.num;
				this.getListData();
			},

			goDetail(item) {
				this.goScreen = true
				uni.navigateTo({
					url: '/pagesA/cardetail/cardetail?id=' + item.carId
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.tags {
		margin-top: 15rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.tag {
			color: #fff;
			font-size: 24rpx;
			padding: 3rpx 15rpx;
			margin-right: 10upx;
			background-color: #1573FF;
			border-radius: 5rpx;
		}

		.tag:nth-child(even) {
			background: #f17559;
		}
	}

	.state {
		position: absolute;
		top: 20rpx;
		left: 0;
		color: #fff;
		z-index: 9;
		padding: 3rpx 10rpx;
		text-align: center;
		border-radius: 0 90rpx 90rpx 0;
		font-size: 24rpx;
		white-space: nowrap;
	}
</style>
